<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../three.min.js"></script>
    <script src="./mathBase.js"></script>
    <script src="../OBJLoader.js"></script>
    <script src="../Stats.js"></script>
</head>
<body>
    <script>
        let width = window.innerWidth;
        let height = window.innerHeight;

        let renderer,camera,scene,meshs = [];
        let group = new THREE.Object3D()
        let clock = new THREE.Clock()
        init()
        animation()
        function init() {
            renderer = new THREE.WebGLRenderer({
                antialise: false
            })
            renderer.setSize(width,height)
            renderer.setClearColor("black")
            document.body.appendChild(renderer.domElement)

            scene = new THREE.Scene()
            scene.add(group)
            group.position.set(0,-100,100)
            camera = new THREE.PerspectiveCamera(60,width/height,1,10000)
            camera.position.set(1000,1000,1000)
            camera.lookAt(scene.position)

            let light = new THREE.DirectionalLight(0xffffff)
            light.position.set(1,1,1)
            
            let famleGeometry = new THREE.BufferGeometry()
            let mleGeometry = new THREE.BufferGeometry()
            let objLoader = new THREE.OBJLoader()

            objLoader.load("mode/obj/female02/female02.obj",function(obj){
                findGeometry(obj,famleGeometry)
                createPoints(famleGeometry,meshs,group,50,50,50,"red",true)

                createPoints(famleGeometry,meshs,group,-200,50,50,"yellow",true)
            }); 
            objLoader.load("mode/obj/male02/male02.obj",function(obj){
                findGeometry(obj,mleGeometry)
                createPoints(mleGeometry,meshs,group,300,50,150,"blue",true)
            });
        }
        //getDelta 是获取一帧渲染缩所需的时间 单位s
        // 假设想要在不同的电脑上 1s都旋转到360度
        // 那么360*getDelta()即可
        function animation() {
            requestAnimationFrame(animation)
            let ztime = clock.getDelta()
            group.rotation.y+= ztime*0.2
            action(ztime)
            renderer.render(scene,camera)
        }
        function judge(position,init_position) {
            let absV = Math.abs(position[0]-init_position.x)+Math.abs(position[1]-init_position.y)
            +Math.abs(position[2]-init_position.z)
            return absV>1?false:true
        }
        function action(ztime) {
            for(let i = 0; i < meshs.length; ++i) {
                /* 固定信息 */
                let mesh = meshs[i]
                //console.log(mesh)
                let delay = mesh.delay
                let speed = mesh.speed
                let length = mesh.length
                // 停留状态
                if(mesh.direction === 0) {
                    if(mesh.now >= delay) {
                        mesh.direction = mesh.down>0?1:-1
                        mesh.down = mesh.up = 0
                        mesh.now = 0
                    } else {
                        mesh.now += ztime
                    }
                } else if(mesh.direction === -1) { //开始下降
                    for(let j = 0; j < mesh.position.length; j+=3) {
                        //y 下降到0  x和z 随机前后移动
                        if(mesh.position[j+1] >0) {
                            mesh.position[j]+= ((Math.random()-0.5)*speed*ztime)
                            mesh.position[j+1]+= ((Math.random()-1.2)*speed*5*ztime)
                            mesh.position[j+2]+= ((Math.random()-0.5)*speed*ztime) 
                        } else {
                            let cur = j/3
                            if(!mesh.init_position[cur].down) {
                                mesh.down+=1
                                mesh.init_position[cur].down = 1
                            }
                        }
                        if(mesh.down === length) {
                            mesh.direction = 0;
                            for(let j= 0; j < length; ++j) {
                                mesh.init_position[j].down = 0
                            }
                            break
                        }
                    }
                    mesh.famleGeometry.attributes.position.needsUpdate = true
                } else if(mesh.direction == 1) { //开始上升
                    for(let j = 0 ; j < mesh.position.length; j+=3) {
                        //判断初始点与当前点是否相似 
                        if(!judge(mesh.position.slice(j,j+3),mesh.init_position[j/3])) {
                            //(初始点-当前点)*0.2*speed*ztime
                            mesh.position[j]+= ((Math.random()-0.2)*(mesh.init_position[j/3].x-mesh.position[j])*0.1*speed*ztime)
                            mesh.position[j+1]+= ((Math.random()-0.2)*(mesh.init_position[j/3].y-mesh.position[j+1])*0.1*speed*ztime)
                            mesh.position[j+2]+= ((Math.random()-0.2)*(mesh.init_position[j/3].z-mesh.position[j+2])*0.1*speed*ztime) 
                        } else {
                            if(!mesh.init_position[j/3].up) {
                                mesh.init_position[j/3].up = 1
                                mesh.up+=1
                            }
                            if(mesh.up === length) {
                                mesh.direction = 0;
                                for(let j= 0; j < length; ++j) {
                                    mesh.init_position[j].up = 0
                                }
                                break
                            }
                        }
                    }
                    console.log(mesh.position)
                    mesh.famleGeometry.attributes.position.needsUpdate = true
                }
            }
        }
        function createPoints(geometry,meshs,group,x,y,z,color,dynamic) {
            /* 拷贝一个famleGeometry */
            famleGeometry = geometry.clone()
            let offsetPos = [
                [-400,0,400],
                [0,0,400],
                [0,0,400],
                [-800,0,0],
            ]
            let pointsMaterial = new THREE.PointsMaterial({
                    size: 1,
                    color: color
            })
            let mesh = new THREE.Points(famleGeometry,pointsMaterial)
            group.add(mesh)
            mesh.position.set(x,y,z)
            mesh.scale.set(3,3,3)
            if(dynamic) {   
                for(let i = 0; i < offsetPos.length; ++i) {
                    let pointsMaterial = new THREE.PointsMaterial({
                        size: 1,
                        color: 0x3e3e3e
                    })
                    let mesh = new THREE.Points(famleGeometry,pointsMaterial)
                    group.add(mesh)
                    mesh.position.x+=x+offsetPos[i][0]
                    mesh.position.y+=y+offsetPos[i][1]
                    mesh.position.z+=z+offsetPos[i][2]
                    mesh.scale.set(3,3,3)
                }
            } 
            /* 获取famleGeometry的位置信息 */
            let length  = famleGeometry.attributes.position.count;
            let position = famleGeometry.attributes.position.array;
            //拷贝一个版本
            let init_position = []
            for(let i = 0; i < position.length; i+=3) {
                init_position[i/3] = {x:position[i],y:position[i+1],z:position[i+2],
                    up:0,down:0
                }
            }
            console.log(init_position)
            console.log(length)
            if(!dynamic) {
                return
            }
            //主体 与 克隆体 同时 消失与出现
            
            meshs.push({
                famleGeometry,
                position,
                init_position,
                length,
                direction: 0,
                down: 0 ,
                up: 0,
                /* 停留时间 delay: 单位s*/
                delay: 1+Math.random()*2,
                now: 0,
                /* 下落与上升 速度 每次下降多少距离 */
                speed: Math.random()*100,
            })
      
        }
    </script>
</body>
</html>